<template>
  <div class="yy-whp-sell-store-report">
    <!--列表-->
    <div class="yy-sell-store-report-list" v-show="type=='list'">
      <Card>
        <p slot="title">
          <Icon type="md-list" />
          进销存报表列表
        </p>
        <Form ref="formInline" :model="formSearch"  inline>
          <FormItem prop="user">
            <Input type="text" v-model="formSearch.supplierName" placeholder="物品编码"></Input>
          </FormItem>
          <FormItem prop="user">
            <Input type="text" v-model="formSearch.supplierName" placeholder="物品名称"></Input>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" placeholder="请选择仓库" v-model="formSearch.storageNum" @on-change="changeStorage(formSearch.storageNum)">
              <Option value="0">全部</Option>
              <Option v-for="(dataSt,index) in dataStorage" :value="dataSt.storageNum" :key="index">{{dataSt.storageName}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" placeholder="请选择库区" v-model="formSearch.localNum">
              <Option value="0">全部</Option>
              <Option v-for="(dataLt,index) in dataLoctions" :value="dataLt.localNum" :key="index">{{dataLt.localName}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="user">
            <DatePicker type="date" placeholder="起始时间" style="width: 200px" v-model="formSearch.lastDayDate" :options="startTimeOption" @on-change="onStartTimeChange"></DatePicker>
          </FormItem>
          <FormItem prop="user">
            <DatePicker type="date" placeholder="结束时间" style="width: 200px" v-model="formSearch.dayDate" :options="endTimeOption" @on-change="onEndTimeChange"></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch()">查询</Button>
          </FormItem>
        </Form>
        <div class="count">合计： 入库：373975.14    出库：457274.80</div>
        <div class="sub-count">
          当页小计：初期库存：数量{{pageSubtotal.startNumTotal}} 金额{{pageSubtotal.startAmountTotal}} 
          | 本期收入：数量{{pageSubtotal.inNumTotal}} 金额{{pageSubtotal.inAmountTotal}} 
          | 本期发出：数量{{pageSubtotal.outNumTotal}} 金额{{pageSubtotal.outAmountTotal}} 
          | 期末结存：数量{{pageSubtotal.numTotal}} 金额{{pageSubtotal.amountTotal}}
        </div>
        <Table :columns="columns" :data="data" border></Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :total="page.total" :page-size="page.pageSize" :current="1" @on-change="changePage" show-total></Page>
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import API from "./api";
import ValidatorRule from "@/filters/validator-rule";
import { formatNetTime } from "@/libs/tools";
import i18n from "./locale";
import mixin from "@/mixin/date-mixin";
import wareHouseMixin from "../common/warehouse-mixin";

export default {
  name: "yy-whp-sell-store-report",
  mixins: [mixin, wareHouseMixin],
  data() {
    return {
      i18n: i18n,
      currentData: null,
      type: "list",
      page: {
        total: 0,
        pageSize: 20
      },
      pageSubtotal: {
        startNumTotal: 0,
        startAmountTotal: 0,
        inNumTotal: 0,
        inAmountTotal: 0,
        outNumTotal: 0,
        outAmountTotal: 0,
        numTotal: 0,
        amountTotal: 0
      },
      formSearch: {
        storageNum: "",
        hasNum: 1,
        userID: "",
        userName: "",
        localNum: "",
        lastDayDate: "",
        dayDate: "",
        itemNum: "",
        itemName: ""
      },
      editFormInLine: {
        storageNum: 1,
        userID: "",
        userName: ""
      },
      editFormRuleInline: {
        supplierNum: ValidatorRule.require,
        supplierName: ValidatorRule.require,
        tel: ValidatorRule.tel
      },
      columns: [
        {
          title: "物品编号",
          align: "center",
          key: "itemNum",
          width: 100
        },
        {
          title: "物品名称",
          align: "center",
          key: "itemName"
        },
        {
          title: "规格",
          align: "center",
          key: "size"
        },
        {
          title: "计量单位",
          align: "center",
          key: "unitName"
        },
        {
          title: "初期库存",
          align: "center",
          children: [
            {
              title: "数量",
              key: "startNum",
              align: "center"
            },
            {
              title: "金额",
              key: "startAmount",
              align: "center"
            }
          ]
        },
        {
          title: "本期收入",
          align: "center",
          children: [
            {
              title: "数量",
              key: "inNum",
              align: "center"
            },
            {
              title: "金额",
              key: "inAmount",
              align: "center"
            }
          ]
        },
        {
          title: "本期发出",
          align: "center",
          children: [
            {
              title: "数量",
              key: "outNum",
              align: "center"
            },
            {
              title: "金额",
              key: "outAmount",
              align: "center"
            }
          ]
        },
        {
          title: "期末结存",
          align: "center",
          children: [
            {
              title: "数量",
              key: "num",
              align: "center"
            },
            {
              title: "金额",
              key: "amount",
              align: "center"
            }
          ]
        }
      ],
      data: [],
      dataTatol: []
    };
  },

  mounted() {
    this.handleSearch();
  },

  computed: {},

  methods: {
    handleSearch() {
      let obj = this.formSearch;
      obj.pageNum = 1;
      obj.pageSize = this.page.pageSize;
      this.formSearch = obj;
      this.getList(obj);
    },

    getList(obj) {
      API.getList(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.page.total = data.total;
            this.page.pageSize = data.pageSize;
            this.dataTatol = res.data;
            this.data = data.list;
            this.thisPageSubtotal();
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    changePage(pageNum) {
      let obj = this.formSearch,
        maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      if (obj.pageNum > maxPageNum) {
        obj.pageNum = maxPageNum;
      } else {
        obj.pageNum = pageNum;
      }
      this.formSearch = obj;
      this.getList(obj);
    },

    thisPageSubtotal() {
      let obj = {
        startNumTotal: 0,
        startAmountTotal: 0,
        inNumTotal: 0,
        inAmountTotal: 0,
        outNumTotal: 0,
        outAmountTotal: 0,
        numTotal: 0,
        amountTotal: 0
      };
      for (let i in this.data) {
        obj.startNumTotal += this.data[i].startNum;
        obj.startAmountTotal += this.data[i].startAmount * 100;
        obj.inNumTotal += this.data[i].inNum;
        obj.inAmountTotal += this.data[i].inAmount * 100;
        obj.outNumTotal += this.data[i].outNum;
        obj.outAmountTotal += this.data[i].outAmount * 100;
        obj.numTotal += this.data[i].num;
        obj.amountTotal += this.data[i].amount * 100;
      }
      obj.startAmountTotal = obj.startAmountTotal / 100;
      obj.inAmountTotal = obj.inAmountTotal / 100;
      obj.outAmountTotal = obj.outAmountTotal / 100;
      obj.amountTotal = obj.amountTotal / 100;
      this.pageSubtotal = obj;
    }
  }
};
</script>
<style lang="less" >
@import "./yy-whp-sell-store-report.less";
</style>
